<template>  
  <view class="view-contain">  
    <!-- 公共组件-每个页面必须引入 -->  
    <public-module leftIcon="arrow-left" :title="title" />  
    <mescroll-uni :height="`${height}px`" :down="downOption" :up="upOption" @init="mescrollInit" @down="downCallback" @up="upCallback">  
      <view  
        class="review-item u-flex-y"  
        v-for="(item, index) in filteredMarkList"  
        :key="index"  
      >  
        <view style="margin-bottom: 16rpx;" class="u-flex">  
          <u-image :src="item.cover" width="200rpx" height="120rpx" />  
          <view class="title">{{ item.title }}</view>  
        </view>  
        <view class="flex-shrink-0 u-flex u-flex-items-center u-flex-between">  
          <view class="sj u-flex">  
            <view>{{ $u.timeFormat(item.updateTime, 'yyyy-mm-dd') }}</view>  
            <view style="margin-left: 10rpx;">{{ channelStr(item.channelId) }}</view>  
            <view class="u-flex-xy-center" style="margin-left: 10rpx;"><u-icon name="eye" :label="item.views" /></view>  
          </view>  
          <view class="btn-detail u-flex-xy-center u-flex-shrink" @click="toDetail(item.content,item)">查看详情</view>  
        </view>  
      </view>  
    </mescroll-uni>  
  </view>  
</template>  
  
<script>  
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";  
import { articleList,articleDetail } from "@/config/api.js";  
  
export default {  
  mixins: [MescrollMixin], // 使用mixin  
  data() {  
    return {  
      title: '时政热点',  
      height: 0,  
      markList: [], // 存储所有获取到的数据  
      filteredMarkList: [], // 存储筛选后的“大神经验”数据  
      downOption: {  
        use: false  
      },  
      upOption: {  
        textNoMore: '一不小心被你看完啦~',  
        toTop: {  
          right: '24rpx',  
          bottom: '60rpx'  
        }  
      }  
    };  
  },  
  onShow() {  
    const res = uni.getSystemInfoSync();  
    this.height = res.windowHeight - 100; // 100为组件高度  
    this.mescroll.resetUpScroll();  
    this.fetchData(); // 初始化时加载数据  
  },  
  methods: {  
    channelStr(key) {  
      switch (key) {  
        case 0:  
          return '大神经验';  
        case 1:  
          return '上岸攻略';  
        case 2:  
          return '申论参考';  
        case 3:  
          return '备考故事';  
        case 4:  
          return '时政热点';  
        case 5:  
          return '其他';  
        default:  
          break;  
      }  
    },  
    async fetchData(page = { num: 1, size: 10 }) {  
      try {  
        const res = await articleList(`?channelId=4&pageNum=${page.num}&pageSize=${page.size}`);  
        if (res && res.rows) {  
          // 筛选“时政热点”数据  
          const filteredData = res.rows.filter(item => item.channelId === 4);  
          // 后台接口有返回列表的总数据量  
          this.mescroll.endBySize(filteredData.length, res.total); // 必传参数(当前页的数据个数, 总数据量)  
          // 如果是第一页需手动清空列表  
          if (page.num === 1) {  
            this.markList = [];  
            this.filteredMarkList = [];  
          }  
          this.markList = [...this.markList, ...res.rows]; // 追加原始数据到markList  
          this.filteredMarkList = [...this.filteredMarkList, ...filteredData]; // 追加筛选后的数据到filteredMarkList  
        }  
      } catch (error) {  
        // 联网失败, 结束加载  
        this.mescroll.endErr();  
      }  
    },  
    upCallback(page) {  
      this.fetchData(page); // 上拉加载时调用fetchData方法，传入当前页码和每页数量  
    },  
	async toDetail(content, item) {
		try {    
			const res = await articleDetail(item.id);  
			// 如果文章详情获取成功，则导航到详情页面  
			uni.navigateTo({    
			url: `/pages/currentpolitics/components/detail?content=${encodeURIComponent(content)}`    
			});    
		} catch (error) {    
			// 联网失败或 articleDetail 调用失败时执行  
			this.mescroll.endErr();  // 结束加载并显示错误  
			console.error('获取文章详情失败:', error); // 可选：打印错误信息到控制台  
		}  
	}  
  }  
};  
</script>  
  
<style lang="scss" scoped>  
.view-contain {  
  position: relative;  
  
  .review-item {  
    width: calc(100vw - 48rpx);  
    margin: 12rpx 24rpx 12rpx;  
    padding: 24rpx;  
    background-color: #FFF;  
    border-radius: 32rpx;  
      
    .title {  
      font-size: 30rpx;  
      font-weight: bold;  
      margin-left: 16rpx;  
      white-space: normal;  
      word-break: break-all;  
      overflow: hidden;  
    }  
      
    .sj {  
      font-size: 28rpx;  
      font-weight: normal;  
      color: #333;  
    }  
  
    .btn-detail {  
      border-radius: 12rpx;  
      font-size: 28rpx;  
      padding: 0 12rpx;  
      color: #409EFF;  
      border: 1rpx solid #409EFF;  
    }  
  }  
  
  .flex-shrink-0 {  
    flex-shrink: 0;  
  }  
}  
</style>